page-pay{
    $font-size:1.3rem;
.pay-content{
    button{
        height: 4rem;
        margin:  2rem;
        display: block;
        @include border-radius(5px);
        width: calc(100% - 4rem);
    }
    .card{
        h3{
            color: #333333;
            font-size: 1.6rem;
            margin: 2rem 1.2rem;
        }
        .card-cell{
            margin: 1.4rem 1.2rem;
            background: #fff;
            padding: 1.5rem 1rem;
            @include flex(space-between);
            .img-container{
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100%;
                width: 6.4rem;
                height: 6.4rem; 
            }
            .info{
                width: calc(100% - 6.7rem);
                @include flex(space-between);
                flex-direction: column;
                h5{
                    color: #333333;
                    font-size: 1.4rem;
                    height: 2rem;
                    line-height: 2rem;
                    margin: 0;
                    i{
                        width: 2rem;
                        height: 2rem;
                        float: right;
                        font-size: 1.4rem;
                        @include border-radius(2rem);
                        border: solid 1px #f7f7f7;
                        line-height: 2rem;
                        text-align: center;
                        color: #ccc;

                    }
                    i.active{
                        color: #ed5736;
                    }
                }
                p{
                    margin: 0;
                    color: $font-text-color;
                    // white-space: nowrap;
                    text-overflow: ellipsis;
                    .text{
                        display: inline-block;
                        width: calc(100% - 6rem);
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                    .price{
                        color: #ed5736;
                        float: right;
                        width: 6rem;
                    }
                    .stars{
                        float: right;
                        i:first-child{
                            margin-left: 0;
                        }
                        i{
                            font-size: 1.2rem;
                            margin-left: 3px;
                        }
                        .icon-star1{
                            color: $font-color;
                        }
                        .icon-star{
                            color: #F4C20D;
                        }
                    }
                }
            }
        }
        .service-content{
            background: #fff;
            margin: 1.4rem 1.2rem;
            padding: 2rem;
            border-radius: 8px;
            .hc-list{
                border-bottom: solid 1px #E6E6E6;
                padding: 1rem 0;
                p{
                    margin: 1rem 0;
                    font-size: 1.4rem;
                    color: #333333;
                }
                span{
                    font-size: 1.8rem;
                    font{
                        font-size: 1.8rem;
                        color: #FF4E20;
                    }
                }
                .type-radio-group{
                    margin-bottom: 3rem; 
                    .input-radio{
                        margin-right: 4rem;
                        span{
                            border-color:  #488aff;
                        }
                        b{
                            background:  #488aff;
                        }
                    }
                    .input-radio::last-child{
                        margin: 0;
                    }
                }
               
            }
            
        }
        .card-content{
            background: #fff;
            margin: 1.4rem 1.2rem;
            padding: 2rem;
            border-radius: 8px;
            h5{
                color: #666666;
                font-size: 1.2rem;
            }
            .textarea-box{
                textarea{
                    width: 100%;
                    border: solid 1px #CCCCCC;
                }
                textarea.reason{
                    height: 10rem;
                }
                textarea.message{
                    height: 20rem;
                }
                p{
                    text-align: right;
                    color: #333333;
                    font-size: 1rem;
                }
            }
            .premium-list{
                padding: 1rem 0;
                border-top: solid 1px #efefef;
                border-bottom: solid 1px #efefef;
                color: #666666;
                font-size:1.2rem;
                font{
                    float: right;
                }
            }
            .premium-listing-date{
                @include flex(flex-start);
                height: 3rem;
                
                label{
                    font-size: 1.2rem;
                    color: #666666;
                    width: 5rem;
                    line-height: 2rem;
                    text-align: right;
                }
                span{
                    position: relative;
                    margin-left: 1rem;
                    width: 13rem;
                    
                    ion-datetime{
                        padding: 0;
                        height: 2rem;
                        line-height: 1.8rem;
                        min-width: 7rem;
                        border: solid 1px #CCCCCC;
                        @include border-radius(5px);
                        font-size: 1.2rem;
                        .datetime-text{
                            line-height: 2rem;
                            padding-left: 1rem;
                        }
                    }
                    font{
                        position: absolute;
                        right: 7px;
                        top: 0.3rem;
                        font-size:1.4rem;
                    }
                }
            }
            .amount{
                text-align: left;
                p{
                    margin: 1rem 0;
                }
                p:first-child{
                    color: #333333;
                    font-size: 1.4rem;
                    
                }
                p:last-child{
                    font-size: 1.8rem;
                    font{
                        color: #ff4e20;
                        font-size: 1.8rem;
                    }
                }
                border-bottom: solid 1px #e6e6e6;
            }
            .balance{
                text-align: right;
                color: $active-color;
                margin: 1rem 0;
                font-size: 1.6rem;
            }
            .hc-list{
                color: $font-text-color;
                font-size: 1.2rem;
                border-bottom: solid 1px #e6e6e6;
                margin: 0;
                padding: 1rem 0;
                
                span{
                    float: right;
                }
            }
            .total{
                text-align: right;
                font-size: 1.6rem;
                padding: 2.5rem 0;
                span{
                    color: #ff4e20;
                }
            }
            .icon-post_success{
                font-size: 5rem;
                text-align: center;
                display: block;
                color: #ed5735;
                margin-bottom: 2rem;
            }
            .tip{
                color: $font-text-color;
                text-align:center;
                margin: 0.5rem 0;
                span{
                    color: $active-color;
                    
                }
            }
        }
        .card-pay{
            padding: 1.4rem 1.2rem;
            background: #fff;
            .title{
                font-size: 1.4rem;
                color: #333333;
            }
            p{
                text-align: left;
                margin: 1rem 0;
            }
            .card-pay-type{
                @include flex(space-between);
                
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                .pay{
                    display: inline-block;
                    background-repeat:  no-repeat;
                    background-position: center;
                    background-size: 100%;
                    width: 3rem;
                    height: 2.5rem;
                }
                .pay_info{
                    width: calc( 100% - 4rem);
                    color: $font-text-color;
                    margin-top: 0.3rem;
                    padding-bottom: 1.3rem;
                    border-bottom: solid 1px #e6e6e6;
                    .input-radio{
                        float: right;
                    }
                }
                .paypal{
                    background-image: url(../assets/imgs/paypal.png); 
                }
                .applepay{
                    background-image: url(../assets/imgs/applepay.png); 
                }
            }
        }
        .banner-container{
            margin: 1.4rem 1.2rem;
            .banner{
                width: 100%;
            }
        }
    }
}
.input-radio{
        
    span{
        display: inline-block;
        position: relative;
        border: solid 1px #999;
        @include border-radius(0.7rem);
        @include box-area($font-size,center);
        vertical-align: middle;
    }
    b{
        width: 0.5rem;
        height: 0.5rem;
        @include border-radius(0.25rem);
        background: #999;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        display: none;
    }
    input[type=radio]{
        opacity: 0;
        position: absolute;
    }
    input[type=radio]:checked~span b{
        display: block;
    }
    font{
        line-height: $font-size;
        font-size: $font-size;
        color: $font-text-color;
    }
}
}

